<template>
  <div class="edit-dialog">
    <el-dialog
      v-model="dialog"
      :title="titleName"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :show-close="true"
      width="500px"
      center
      @close="handleClose"
    >
      <div slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/userManage' }">用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>添加用户</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-form
          label-position="right"
          label-width="auto"
          :model="addFormData"
          :rules="rules"
          ref="formRef"
        >
          <el-form-item prop="name" label="用户名">
            <el-input v-model="addFormData.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="addFormData.displayName" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item prop="email" label="邮箱">
            <el-input v-model="addFormData.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item prop="passwd" label="密码">
            <el-input
              v-model="addFormData.passwd"
              type="password"
              maxlength="16"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="confirmPasswd" label="确认密码">
            <el-input
              v-model="addFormData.confirmPasswd"
              type="password"
              maxlength="16"
              placeholder="请输入确认密码"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <el-button type="primary" icon="el-icon-check" @click="submitForm('formRef')">提 交</el-button>
          <el-button icon="el-icon-close" @click="handleClose">取 消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add } from "@/api/userManage";
import { checkEmail } from "@/utils/common";

export default {
  name: "addUser",
  props: {
    formData: Object,
    showDialog: Boolean
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addFormData.passwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      addFormData: {},
      titleName: "添加",
      submitLoading: false,
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" }
        ],
        passwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirmPasswd: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  computed: {
    dialog: function() {
      return this.showDialog;
    }
  },
  watch: {
    dialog(newVal, oldVal) {
      if (newVal) {
        this.addFormData = this.formData;
      }
    }
  },
  methods: {
    back() {
      this.$router.back();
    },
    // 取消事件
    handleClose() {
      this.$emit("changeVisible", false);
    },
    submitForm(formName) {
      this.submitLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          const that = this;
          const data = {
            ...that.addFormData
          };
          add(data)
            .then(res => {
              that.submitLoading = false;
              if (res["code"] == 200) {
                that.$emit("changeVisible", false);
                that.$emit("getList");
                this.$message.success("添加成功!");
              } else {
                this.$message(res["msg"]);
              }
            })
            .catch(() => {
              that.submitLoading = false;
            });
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
</style>
